<template>
	<view class="common-container app-container">
		<view class="status_bar"> </view>

		<u-navbar title="通讯录">
			<view class="u-nav-slot" slot="left">
			</view>
		</u-navbar>
		<view class="main-wrap has-navbar-tabbar">
			<view class="search-container">
				<u-search placeholder="请输入用户名、姓名、手机、部门职位" shape="round" v-model="listQuery.keyword" :showAction="false"
					@search="onSearch"></u-search>
			</view>
			<view class="flex-main">
				<u-cell-group :border="false">
					<u-cell class="mail-list-item" v-for="item in list" :key="item.id"
						:title="item.realName+'/'+item.userName" @click="handleDetails(item.id)">
						<template slot='label'>
							{{ item.organizationName }}
						</template>
						<template #icon>
							<u-image :showLoading="true" shape="circle" :src="$constants.getFileView(item.avatar)"
								width="48px" height="48px"></u-image>
						</template>
						<template #right-icon />
					</u-cell>
					<u-loadmore :status="status" style="margin-top: 20px;" @loadmore="handleLoadMore" />
				</u-cell-group>

			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				keyword: '',
				listQuery: {
					page: 1,
					limit: 10,
					keyword: '',
					sort: '+userPinyin'
				},
				list: [],
				status: 'loadmore',
			}
		},
		onLoad() {

		},
		created() {
			this.fetchData()
		},
		methods: {
			onSearch() {
				this.listQuery = {
					...this.listQuery,
					page: 1
				}
				this.list = []
				this.fetchData()
			},
			// 下拉刷新
			onPullDownRefresh() {
				this.listQuery = {
					...this.listQuery,
					page: 1
				}
				this.list = []
				this.fetchData()
				uni.stopPullDownRefresh();

			},
			handleLoadMore() {
				if (this.status === 'loading' || this.status === 'nomore') return;
				this.status = 'loading';
				this.listQuery = {
					...this.listQuery,
					page: this.listQuery.page + 1
				}
				this.fetchData();
			},
			onReachBottom() {
				if (this.status === 'loading' || this.status === 'nomore') return;
				this.status = 'loading';
				this.listQuery = {
					...this.listQuery,
					page: this.listQuery.page + 1
				}
				this.fetchData();

			},
			fetchData() {
				this.$store.dispatch('userPageV2', this.listQuery).then((res) => {
					if (res.total === 0) {
						this.status = ''
						nomore
						this.list = []
						return
					}
					this.list.push(...res.records)
					this.status = (res.pages === this.listQuery.page) ? 'nomore' : 'loadmore';

				})
			},
			handleDetails(id) {
				uni.navigateTo({
					url: "/pages/mailList/details?id=" + id
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.search-container {
		margin: 10px 15px;
	}

	.mail-list-item {
		height: 60px;
		margin-bottom: 1rem;

		::v-deep .u-cell__title {
			color: #909193;
			margin-left: 1rem;
			font-size: 12px;
			display: flex;
			flex-direction: column;
			justify-content: center;
		}

		::v-deep .u-cell__title-text {
			margin-bottom: 5px;
		}
	}
</style>